<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">
                    ID: <input v-model="id" type="text" class="form-control">
                </label>
                <label for="">
                    NAME: <input @keyup.f2="add" v-model="name" type="text" class="form-control">
                </label>
                <input @click="add()" type="button" value="添加" class="btn btn-primary">
                <label for="">
                    搜索名称关键字: <input v-color="'blue'"  v-focus id="search" v-model="keywords" type="text" class="form-control">
                </label>
            </div>
        </div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>CTIME</th>
                    <th>OPEARTION</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text="item.name">{{}}</td>
                    <td>{{item.ctime|dateFormat()}}</td>
                    <td>
                        <a @click.prevent="del(item.id)" href="">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="app2">
        {{1+1}}
        <h3 v-fontsize="50" v-color="'pink'" v-fontweight="900">{{dt|dateFormat}}</h3>
    </div>

    <script>
        // Vue.filter('过滤器的名称',function () {})
        Vue.filter('dateFormat', function (dateStr, pattern = "") {
            // 根据给定的时间字符串，得到特定的时间
            var dt = new Date(dateStr)

            //   yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()

            // return y + '-' + m + '-' + d

            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })

            // 全局按键修饰符
        Vue.config.keyCodes.f2=113

            // 定义全局指令 调用时加上v-调用
        Vue.directive('focus',{
            // 指令绑定到元素上的时候 会立即执行 只执行一次
            // 绑定指令的时候 还没有插入到DOM中去
            bind:function (el) {
                // 无效
                el.focus()
            },
            // 元素插入到dom的时候 只执行一次
            inserted:function (el) {
                // JS行为相关的操作  用inserted
                el.focus()
            },
            // vnode更新的时候 多次触发
            updated:function () {

            }
        })
        Vue.directive('color',{
            bind:function (el,binding) {
                // js样式相关操作 用bind
                el.style.color='red'
                console.log(binding)
                console.log(binding.name)
                console.log(binding.value)
                console.log(binding.expression)
                el.style.color=binding.value
            }
        })

        var vm=new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'奔驰',ctime:new Date()},
                    {id:2,name:'宝马',ctime:new Date()},
                ],
                id:'',
                name:'',
                keywords:''
            },
            methods:{
                add() {
                    console.log('ok')
                    var car={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(car)
                    this.id=this.name=''
                },
                del(id){
                    console.log(id)
                    // this.list.some((value, index, array) => {
                    //     if (value.id==id){
                    //         this.list.splice(index,1)
                    //         return true
                    //     }
                    // })
                    var index=this.list.findIndex(value => {
                        if (value.id==id){
                            return true
                        }
                    })
                    this.list.splice(index,1)
                },
                search(keywords){
                    // var newlist=[]
                    // this.list.forEach(item => {
                    //     if (item.name.indexOf(keywords)!=-1){
                    //         newlist.push(item)
                    //     }
                    // })
                    // return newlist

                    // forEach filter  findIndex
                    return this.list.filter(item=>{
                        // if (item.name.indexOf(keywords!=-1)){
                        if (item.name.includes(keywords)){
                            return item
                        }
                    })
                }
            }
        })

        var vm2=new Vue({
            el:'#app2',
            data: {
                dt:new Date()
            },
            methods: {

            },
            // 定义私有过滤器
            filters:{
                dateFormat:function (dateStr, pattern = "") {
                    var dt = new Date(dateStr)

                    //   yyyy-mm-dd
                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                    var d = (dt.getDate()).toString().padStart(2,'0')

                    // return y + '-' + m + '-' + d

                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                    } else {
                        var hh = dt.getHours().toString().padStart(2,'0')
                        var mm = dt.getMinutes().toString().padStart(2,'0')
                        var ss = dt.getSeconds().toString().padStart(2,'0')

                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }
                }
            },
            directives:{
                // 自定义私有指令
                'fontweight':{
                    bind:function (el,binding) {
                        el.style.fontWeight=binding.value
                    },
                    inserted:function () {

                    }
                },
                'fontsize':function (el,binding) {
                    el.style.fontSize=parseInt(binding.value)+'px'
                }
            }
        })

        // document.querySelector('#search').focus()
    </script>
</body>
</html>